<template>
    <div class="box">
 
     
          <span class="add-btn" @click="dialoger = true">新增</span>
    
  
      <div class="privilege-list">
          <el-table
      :data="privileges"
      border
      size = 'small'
      style="width: 100% ">
      <el-table-column
        fixed
        prop="id"
        label="id"
        
       >
      </el-table-column>
      <el-table-column
        prop="name"
        label="name"
        >
      </el-table-column>

      <el-table-column
        prop="description"
        label="权限描述"
        width="200"
        >
      </el-table-column>
  
      <el-table-column
        fixed="right"
        label="操作"
        >
        <template slot-scope="scope">
          <el-button @click="data=scope.row
            isChange = true ,dialoger = true" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table> 
  
  
      </div>
      <el-dialog
        append-to-body
        class="dialog"
        :title="isChange ? '修改权限' : '添加权限'"
        :visible.sync="dialoger"
      >
        <span style="margin-left: 1vw;">name:</span>
        <el-input v-model="data.name"></el-input>
        <div style="margin-left: 1vw;margin-top: 2vh;">description</div>
        <el-input v-model="data.description"></el-input>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialoger = false">取 消</el-button>
          <el-button type="primary" @click="addPrivilege()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        dialoger: false,
        data: {
            id:'',
            name:'',
            description:''
        },
        isChange: false,
        privileges:[]
      };
    },
    methods: {
      async addPrivilege() {
        
        const { data: res } = this.isChange
          ? await this.$http.put("/privileges",this.data)
          : await this.$http.post("/privileges",  this.data);
        if (res.code == 200) {
          this.$msg.fail("成功");
        }
        this.dialoger = false;
        this.isChange = false ;
      },
      async getPrivileges() {
          const { data: res } = await this.$http.get("/privileges")
          if(res.code == 200) {
              this.privileges = res.data
          }
      },
    },
    created() {
      this.getPrivileges();
    },
  };
  </script>
  
  <style scoped>
  .box{
      width: 100%;
      
  }
  .privilege-list {
    height: 85vh; 
  }
  .add-btn {
      font-size: .8em;
      color: rgb(11, 63, 105);
      border: 2px solid black;
      padding: .5vh 1vw;
      line-height: 1rem;
      border-radius: 1vw;
      cursor: pointer;
      float: right;
  }
  .dialog {
    width: 40vw;
    margin: auto;
  }
  </style>